import React from 'react'
// 直接定义类型以避免导入问题
interface SettingsPanelState {
  isOpen: boolean
  position: {
    x: number
    y: number
  }
  animating: boolean
}

interface SettingsPanelProps {
  panelState: SettingsPanelState
  panelRef: React.RefObject<HTMLDivElement>
  onClose: () => void
  children: React.ReactNode
}

/**
 * 设置面板容器组件
 * 提供弹出框的定位、动画和基础样式
 */
export const SettingsPanel: React.FC<SettingsPanelProps> = ({
  panelState,
  panelRef,
  onClose,
  children
}) => {
  if (!panelState.isOpen) return null

  const { position, animating } = panelState

  return (
    <>
      {/* 遮罩层 */}
      <div
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.1)',
          zIndex: 999,
          opacity: animating ? 0 : 1,
          transition: 'opacity 0.3s ease',
        }}
        onClick={onClose}
      />
      
      {/* 设置面板 */}
      <div
        ref={panelRef}
        style={{
          position: 'fixed',
          left: position.x,
          top: position.y,
          width: '320px',
          maxHeight: '500px',
          backgroundColor: 'white',
          borderRadius: '12px',
          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.15)',
          border: '1px solid #e0e0e0',
          zIndex: 1000,
          overflow: 'hidden',
          transform: animating ? 'scale(0.8)' : 'scale(1)',
          opacity: animating ? 0 : 1,
          transition: 'all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)',
          transformOrigin: 'top left',
        }}
      >
        {/* 头部 */}
        <div
          style={{
            padding: '16px 20px',
            borderBottom: '1px solid #f0f0f0',
            backgroundColor: '#fafafa',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <span style={{ fontSize: '18px' }}>🎛️</span>
            <h3 style={{ 
              margin: 0, 
              fontSize: '16px', 
              fontWeight: '600',
              color: '#333'
            }}>
              弹幕设置
            </h3>
          </div>
          
          <button
            onClick={onClose}
            style={{
              background: 'none',
              border: 'none',
              fontSize: '18px',
              cursor: 'pointer',
              padding: '4px',
              borderRadius: '4px',
              color: '#666',
              transition: 'all 0.2s ease',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = '#f0f0f0'
              e.currentTarget.style.color = '#333'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = 'transparent'
              e.currentTarget.style.color = '#666'
            }}
            title="关闭设置"
          >
            ✕
          </button>
        </div>
        
        {/* 内容区域 */}
        <div
          style={{
            padding: '20px',
            maxHeight: '400px',
            overflowY: 'auto',
            scrollbarWidth: 'thin',
            scrollbarColor: '#ccc transparent',
          }}
        >
          {children}
        </div>
        
        {/* 底部操作区 */}
        <div
          style={{
            padding: '16px 20px',
            borderTop: '1px solid #f0f0f0',
            backgroundColor: '#fafafa',
            display: 'flex',
            justifyContent: 'space-between',
            gap: '12px',
          }}
        >
          <button
            onClick={() => {
              console.log('重置设置')
            }}
            style={{
              background: 'none',
              border: '1px solid #ddd',
              borderRadius: '6px',
              padding: '8px 16px',
              cursor: 'pointer',
              fontSize: '14px',
              color: '#666',
              transition: 'all 0.2s ease',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = '#bbb'
              e.currentTarget.style.color = '#333'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = '#ddd'
              e.currentTarget.style.color = '#666'
            }}
          >
            重置
          </button>
          
          <button
            onClick={onClose}
            style={{
              background: '#007bff',
              border: 'none',
              borderRadius: '6px',
              padding: '8px 16px',
              cursor: 'pointer',
              fontSize: '14px',
              color: 'white',
              fontWeight: '500',
              transition: 'all 0.2s ease',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = '#0056b3'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = '#007bff'
            }}
          >
            应用
          </button>
        </div>
      </div>
    </>
  )
}

export default SettingsPanel
